import { createAsyncThunk, createSlice } from "@reduxjs/toolkit";
import { getPlayCatlistAPI, getPlayHotCatlistAPI } from "../api";


export const feachCatsActon = createAsyncThunk("cats", async (arg, { dispatch }) => {
  const { tags } = await getPlayHotCatlistAPI()
  dispatch(changeHotcatsAction(tags))

  const { categories, sub } = await getPlayCatlistAPI()
  const newCategories = Object.values(categories)
  dispatch(changeCatlistAction({ newCategories, sub }))

})

interface IState {
  hotcats: any[],
  categories: any[],
  sub: any[]
}

const initialState: IState = {
  hotcats: [],
  categories: [],
  sub: []
}

const discoverSlice = createSlice({
  name: "discover",
  initialState,
  reducers: {
    changeHotcatsAction(state, { payload }) {
      state.hotcats = payload
    },
    changeCatlistAction(state, { payload }) {
      const { newCategories, sub } = payload
      state.categories = newCategories
      state.sub = sub
    }
  }
})

export const { changeHotcatsAction, changeCatlistAction } = discoverSlice.actions
export default discoverSlice.reducer